<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XML LOAD 페이지</title>

<style>
#btnLoad {
	width: 100px;
	height: 50px;
	border:3px solid pink;
	border-radius: 5px;
}
#result {
	width: 500px;

	border: 2px dotted gray;
	border-radius:5px;
}
</style>
<script>
var xhr;
var rs;

function init(){
	var btn = document.getElementById('btnLoad');
	rs = document.getElementById("result");
	
	xhr = new XMLHttpRequest();  // 객체 생성 
	xhr.onreadystatechange = xmlLoad;  // callback 함수 지정
	
	btn.onclick=function(){
		var url = 'xmlDocTest.jsp';
		xhr.open('get', url, true);
		xhr.send();  //send 를 통해서 xmlLoad 로 넘어간다.
	}
}

function xmlLoad(){
	if(xhr.readyState == 4 && xhr.status == 200){
		var doc = xhr.responseXML;
		var list = doc.getElementsByTagName('member');
		// getElements 를 써야하는데 getElement를 쳐서 오류가 났다.
		rs.innerHTML = 'Member 갯수 : ' + list.length + '<br/><br/>';
		
		for( i=0; i<list.length; i++){
			var item = list.item(i);  // 첫번째 item 을 가져온다.
			var n = item.getElementsByTagName('name').item(0).firstChild.nodeValue;  // byTagName 은 배열 타입으로 가져온다.
			var a = item.getElementsByTagName('addre').item(0).firstChild.nodeValue;
			var p = item.getElementsByTagName('phone').item(0).firstChild.nodeValue;
			
			rs.innerHTML += '<li> Name : ' + n;
			rs.innerHTML += '<li> Address : ' + a;
			rs.innerHTML += '<li> Phone : ' + p;
			rs.innerHTML += '<hr/>'
		}
	}	

}
</script>
</head>
<body>

<h1>xml 문서 처리 결과</h1>
<input type="button" value="XML Load" id="btnLoad"><p/>
<div id="result"></div>

<script>init();</script>
</body>
</html>